<template>
  <div class="bg-gray-300" style="padding: 50px 10px">
    <el-card class="box-card" style="width: 1200px;margin: 0 auto;">
      <div slot="header" class="clearfix">
        <span>{{ doc.title }}</span>
        <div style="float: right; padding: 3px 0">
          <el-tag
            v-for="keyword in doc.keywordList"
            :key="keyword"
            size="medium"
            class="mr-1"
          >
            {{ keyword }}
          </el-tag>
        </div>
      </div>
      <div v-if="doc.fileType === 'html'" v-html="doc.msg" />
      <markdown-see v-else-if="doc.fileType === 'md'" :msg="doc.msg" />
      <div v-else>{{ doc.msg }}</div>
    </el-card>
  </div>
</template>

<script>
import { getDocSystem } from '@/api/iot/iotDocSystemApi'
import { getDocCustom } from '@/api/iot/iotDocCustomApi'
import { getDocProduct } from '@/api/iot/iotDocProductApi'
import MarkdownSee from '@/components/MarkdownSee'
export default {
  name: 'DocDetails',
  components: {
    MarkdownSee
  },
  data() {
    return {
      doc: '',
      id: null
    }
  },
  created() {
    const param = this.$route.query
    this.id = param.id
    if (param.docType) {
      switch (param.docType) {
        case 'custom':
          this.getDocCustom()
          break
        case 'system':
          this.getDocSystem()
          break
        case 'product':
          this.getDocProduct()
          break
      }
    }
  }, methods: {
    getDocSystem() {
      getDocSystem({
        id: this.id
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.doc = data
        }
      })
    },
    getDocCustom() {
      getDocCustom({
        id: this.id
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.doc = data
        }
      })
    },
    getDocProduct() {
      getDocProduct({
        id: this.id
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.doc = data
        }
      })
    }
  }
}
</script>

